<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<canvas id="canvas2" width="400" height="400"></canvas>
    <!-- 定时器requestAnimationFrame 16ms -->
<body>

<script>
    
    const canvas = document.getElementById('canvas2')
    const ctx = canvas.getContext('2d'); // Canvas2DContext
    // Set line width
    ctx.lineWidth = 10;

    // Wall
    ctx.strokeRect(75, 140, 150, 110);

    // Door
    ctx.fillRect(130, 190, 40, 60);

    // Roof
    ctx.beginPath();
    ctx.moveTo(50, 140);
    ctx.lineTo(150, 60);
    ctx.lineTo(250, 140);
    ctx.closePath();
    ctx.stroke();
</script>
</body>
</html>